<template>
  <el-dialog
      v-model="dialogVisible"
      title="上传文件"
      width="50%"
      class="lookDialog"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
  >
    <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
    >

      <el-form-item label="请选择需要上传的文件" prop="fileList">
        <el-upload
            v-model:file-list="ruleForm.fileList"
            class="upload-demo"
            action="#"
            multiple
            accept=" .xlsx, .pdf, .doc, .docx, .xls, .rar, .zip, .png , .jpg, .jepg"
            :auto-upload="false"
            :on-remove="handleRemove"
            :limit="1"
            :on-exceed="handleExceed"
            :on-change="fileChange"
        >
          <el-button type="primary">选择</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item label="请选择报告时间" prop="time">
        <el-date-picker
            v-model="ruleForm.time"
            type="date"
            placeholder="请选择时间"
            value-format="YYYY-MM-DD"
            @change="changeTime"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          上传
        </el-button>
        <el-button @click="resetForm(ruleFormRef)">取消</el-button>
      </el-form-item>

    </el-form>
  </el-dialog>
</template>

<script lang="ts" setup>
import {ref, reactive} from "vue";
import useReportStore from "@/store/modules/report/report";
import {ElMessage, ElMessageBox} from 'element-plus'
import type {UploadProps, UploadUserFile, FormInstance, FormRules} from 'element-plus'
import {timestampToDate} from "@/utils/dateUtilsT";
import useFileStore from "@/store/modules/file/file";

let reportStore = useReportStore()
let fileStore =useFileStore()
let dialogVisible = ref<boolean>(false)

interface RuleForm {
  fileList: UploadUserFile[]
  time: string,
}

const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  fileList: [],
  time: ''
})

const rules = reactive<FormRules<RuleForm>>({
  fileList: [
    {required: true, message: '请选择文件', trigger: 'change'},
  ],
  time: [
    {required: true, message: '请选择上传的时间', trigger: 'blur'},
  ]
})

let init = () => {
  ruleForm.fileList = []
  ruleForm.time = timestampToDate()
  fileStore.fileFormData.append('reportTime', ruleForm.time)
  dialogVisible.value = true
}


const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      fileStore.fileFormData.append('reportId', fileStore.reportLeftItem.id)
      console.log(fileStore.fileFormData.get('file'))
      console.log(fileStore.fileFormData.get('reportTime'))
      console.log(fileStore.fileFormData.get('reportId'))
      fileStore.useUploadReportFile()
      dialogVisible.value = false
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}


const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
  console.log(file, uploadFiles)
}


const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {

}

const fileChange: UploadProps['onChange'] = (uploadFile, uploadFiles) => {
  console.log(uploadFile)
  //@ts-ignore

  fileStore.fileFormData.append('file', uploadFile.raw)
}

const changeTime = (time: string) => {
  fileStore.fileFormData.append('reportTime', time)
}


defineExpose({
  dialogVisible,
  init
})
</script>

<style scoped>

</style>
